<fs-page-bar></fs-page-bar>
<nz-card [nzBordered]="false">
  <button nz-button [abpPermission]="'AbpIdentity.Roles.Create'" (click)="add()" [nzType]="'primary'">
    <i nz-icon nzType="plus"></i>
    <span>{{ 'AbpIdentity::NewRole' | abpLocalization }}</span>
  </button>
  <div class="my-md"></div>
  <nz-table #basicTable [nzData]="data$ | async" [nzPageSize]="list.maxResultCount" [nzTotal]="totalCount$ | async"
    [nzLoading]="list.isLoading$ | async" [nzFrontPagination]="false" (nzPageIndexChange)="list.page=$event-1;">
    <thead>
      <tr>
        <th>{{ 'AbpIdentity::DisplayName:RoleName' | abpLocalization }}</th>
        <th>{{ 'AbpIdentity::Actions' | abpLocalization }}</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let data of basicTable.data">
        <td>{{ data.name }}
          <nz-tag [nzColor]="'#17a2b8'" *ngIf="data.isPublic">
            {{ 'AbpIdentity::DisplayName:IsPublic' | abpLocalization }}</nz-tag>
          <nz-tag [nzColor]="'#28a745'" *ngIf="data.isDefault">
            {{ 'AbpIdentity::DisplayName:IsDefault' | abpLocalization }}</nz-tag>
        </td>
        <td>
          <a nz-dropdown [nzDropdownMenu]="opMenu">
            {{ 'AbpIdentity::Actions' | abpLocalization }}
            <i nz-icon nzType="down"></i>
          </a>
          <nz-dropdown-menu #opMenu="nzDropdownMenu">
            <ul nz-menu>
              <li nz-menu-item [abpPermission]="'AbpIdentity.Roles.Update'" (click)="edit(data.id)">
                {{ 'AbpIdentity::Edit' | abpLocalization }}</li>
              <li nz-menu-item [abpPermission]="'AbpIdentity.Roles.ManagePermissions'"
                (click)="openPermissionsModal(data.name)">
                {{ 'AbpIdentity::Permissions' | abpLocalization }}</li>
              <li nz-menu-item [abpPermission]="'AbpIdentity.Roles.Delete'" (click)="delete(data.id, data.name)">
                {{ 'AbpIdentity::Delete' | abpLocalization }}</li>
            </ul>
          </nz-dropdown-menu>
        </td>
      </tr>
    </tbody>
  </nz-table>
</nz-card>
<nz-modal [nzStyle]="{ top: '20px' }" [(nzVisible)]="isModalVisible" [nzTitle]="modalTitle" [nzContent]="modalContent"
  [nzFooter]="modalFooter" (nzOnCancel)="isModalVisible=false">
  <ng-template #modalTitle>
    {{(selected?.id ? 'AbpIdentity::Edit' : 'AbpIdentity::NewRole') | abpLocalization}}
  </ng-template>

  <ng-template #modalContent>
    <ng-template #loaderRef>
      <div class="text-center"><i class="fa fa-pulse fa-spinner"></i></div>
    </ng-template>

    <form nz-form *ngIf="form; else loaderRef" [formGroup]="form" (ngSubmit)="save()">


      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="role-name">
          {{ 'AbpIdentity::RoleName' | abpLocalization }}</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <input nz-input formControlName="name" id="role-name" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control [nzSpan]="14" [nzOffset]="6">
          <label nz-checkbox formControlName="isDefault">
            <span>
              {{
                  'AbpIdentity::DisplayName:IsDefault' | abpLocalization
              }}
            </span>
          </label>
          <label nz-checkbox formControlName="isPublic">
            <span>
              {{
                  'AbpIdentity::DisplayName:IsPublic' | abpLocalization
              }}
            </span>
          </label>
        </nz-form-control>
      </nz-form-item>
    </form>
  </ng-template>

  <ng-template #modalFooter>
    <button nz-button nzType="default" (click)="isModalVisible=false;this.form = null">
      {{ 'AbpIdentity::Cancel' | abpLocalization }}
    </button>
    <button nz-button nzType="primary" (click)="save()" [disabled]="form?.invalid">
      {{
      'AbpIdentity::Save' | abpLocalization
      }}
    </button>
  </ng-template>
</nz-modal>
<ng-alain-permission-management [(visible)]="visiblePermissions" providerName="R" [providerKey]="providerKey">
</ng-alain-permission-management>